<template>
  <div>
    <div class="home">
      <el-dialog
        title=""
        :visible.sync="dialogVisible1"
        width="100%"
        :lock-scroll="false"
        :fullscreen="true"
        :before-close="close1">
        <div @click="dialogVisible2 = true">
          <img v-lazy="homeImg" alt="" srcset="" style="width: 100%;height: 100%;cursor: pointer;" />
        </div>
      </el-dialog>
    </div>

    <div class="qrCode">
      <el-dialog
        title="请添加客户经理微信"
        :visible.sync="dialogVisible2"
        :width="dialogWidth"
        :lock-scroll="false"
        :before-close="close2"
        :style="{'text-align' : 'center'}"
      >
        <div class="col-dialog col-h-300">
          <img v-lazy="QrCode" alt="" />
          <div class="col-dialog-text">扫码添加客户经理微信</div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import homeImg from '@/assets/img/common/home.png'
import QrCode from '@/assets/img/common/QrCode.png'

export default {
  name: "Menu",
  props: {
    
  },
  created() {
    this.getPlatform()
  },
  data() {
    return {
      dialogVisible1: false,
      dialogVisible2: false,
      homeImg: homeImg,
      QrCode: QrCode,
      drawer: true,
      dialogWidth: '30%',
    };
  },
  methods: {
    open() {
      this.dialogVisible1 = true
    },
    close1() {
      this.dialogVisible1 = false
    },
    close2() {
      this.dialogVisible2 = false
    },
    // 判断是pc还是手机(适配)
    getPlatform() {
      this.dialogWidth = this.isMobile() ? '80%' : '30%'
    },
    isMobile() {
      let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i);
      return flag;
    }
  }
};
</script>
<style lang="scss" scoped>
// ::v-deep .el-dialog__header {
//   display: none !important;
// }
.home {
  ::v-deep .el-dialog__body {
    padding: 10px 0 0 !important;
  }
}

.col-dialog {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;

  &-text {
    font-size: 14px;
    color: #1189FF;
  }

  img {
    width: 80%;
  }
}

.col-h-300 {
  // height: 330px;
}
@media (max-width: 767px) {
  .col-h-300 {
    height: 230px !important;
  }
}
</style>
